<!-- 流程看板 -->
<template>
  <div class="wrap">
    <div class="header">
      <a-space>
        <a-button type="default" class="defaultButton" @click="handOnRefresh">
          <Icons type="sync"></Icons>
        </a-button>
        <a-tooltip :title="isAllOpen ? '全部收起' : '全部展开'" v-if="Array.isArray(tempList) && tempList.length > 0">
          <a-button type="default" class="defaultButton" @click="changeShow(isAllOpen ? 'close' : 'open')">
            <a-icon :type="isAllOpen ? 'minus' : 'plus'" />
          </a-button>
        </a-tooltip>
        <FormData :formData="{ date: date }" :onCallBack="onBackData" dataIndex="date" :allowClear="false"></FormData>
        <a-select :value="select.value" :options="select.options" @change="selectChange"></a-select>
        <a-select :value="order" :options="orderSelect" @change="selectOrderChange"></a-select>
      </a-space>
      <a-space>
        <a-input v-model="keyWord" placeholder="请输入关键字"></a-input>
        <!-- <a-button type="primary" @click="onFilterSearch">搜索</a-button> -->
      </a-space>
    </div>
    <div class="content" ref="contentRef">
      <a-spin style="width: 100%; height: 100%" :spinning="loading">
        <div class="empty" v-if="tempList.length == 0">
          <a-empty :description="tempDescription"></a-empty>
        </div>
        <a-row :gutter="[12, 12]" type="flex" justify="start" align="top" v-else>
          <a-col :span="item.colSpan || (24 / select.value)" v-for="(item, index) in tempList"
            :key="`${index}-${item.id}-${select.value}`">
            <a-collapse v-model="activeObj[item.id]" expandIconPosition="left" :destroyInactivePanel="true">
              <a-collapse-panel key="1" :header="item.name">
                <div slot="extra" class="extraSlot" style="">
                  <a-tooltip :title="`${item.dateType == '月' ? '近12月' : '当月'}总数:${item.num}`">
                    <div v-if="item.auxiliaryTitle">
                      <span style="font-size: 12px;">{{ item.auxiliaryTitle }}</span>
                    </div>
                    {{ item.num }}
                  </a-tooltip>
                </div>
                <div class="chartShow">
                  <div v-if="Array.isArray(item.dataLabelValues) && item.dataLabelValues.length > 0"
                    style="margin-bottom: 8px;font-weight:600;font-size: 14px;display: flex;justify-content: center;">
                    <div v-for="it in item.dataLabelValues" :key="it.label" style="margin-right: 36px;">
                      <span>{{ it.label }}：{{ it.value
                      }}</span>
                    </div>
                  </div>
                  <ManageEchart v-if="Array.isArray(item.desc) && item.desc.length > 0" type="bar" :setting="{
                    label: {
                      color: '#000000',
                      fontSize: 10,
                    },
                    tooltip: {
                      company: [item.dateType || '', '条'],
                    },
                    isShow: true,
                    labelFormter: item.colSpan && item.colSpan != '',
                  }" :data="item.desc">
                  </ManageEchart>
                  <a-empty v-else></a-empty>
                </div>
              </a-collapse-panel>
            </a-collapse>
          </a-col>
        </a-row>
      </a-spin>
    </div>
  </div>
</template>
<script>
import moment from "moment";
import * as dayjs from "dayjs";
import Icons from "./components/Icons.vue";
import ManageEchart from "@/components/ManageEchart/ManageEchart";
import FormData from "./components/FormData";
export default {
  name: "ProcessLook",
  components: { Icons, ManageEchart, FormData },
  props: {
    menuId: {
      type: [String, Number],
      default: 15,
    },
    // 树状图key
    sponsoredUnit: {
      type: [String, Number],
    },
  },
  data() {
    return {
      // 关键字
      keyWord: "",
      // 日期
      date: "",
      // 激活
      activeObj: {},
      // 原始数据
      list: [],
      // 加载
      loading: false,
      select: {
        options: [
          {
            label: "一行一列",
            value: 1,
          },
          {
            label: "一行二列",
            value: 2,
          },
          {
            label: "一行三列",
            value: 3,
          },
          {
            label: "一行四列",
            value: 4,
          },
        ],
        value: 3,
      },
      orderSelect: [
        {
          label: "倒序",
          value: "DESC",
        },
        {
          label: "正序",
          value: "ASC",
        },
      ],
      order: "DESC",
    };
  },
  methods: {
    init() {
      this.keyWord = "";
      this.activeObj = {};
    },
    handOnRefresh() {
      this.geteData();
    },
    onFilterSearch() { },
    // 展开、收起
    changeShow(type) {
      let obj = this.activeObj;
      this.tempList.filter((val, ind) => {
        if (type == "open") {
          obj[val.id] = ["1"];
        } else if (type == "close") {
          obj[val.id] = [];
        }
      });
      this.activeObj = obj;
    },
    // 获取数据
    geteData(aParams) {
      let params = {
        date: this.date,
        sponsoredUnit: this.sponsoredUnit,
        order: this.order,
        ...aParams,
      };
      if (params.date != "" && typeof params.sponsoredUnit != "number") {
        this.loading = true;
        this.getAxios(this.$getFlowtypedesc, params)
          .then((res) => {
            if (res.code == 200) {
              let data = res.data;
              let obj = {};
              data = data.map((val, index) => {
                obj[val.id] = ["1"];
                return {
                  ...val,
                  desc: val.desc.map((vals) => ({ ...vals, label: vals.name, value: vals.num })),
                };
              });
              this.activeObj = {};
              this.list = data;
              this.activeObj = obj;
            }
          })
          .catch(() => { })
          .finally(() => {
            this.$nextTick(() => {
              this.scrollTop();
            });
            this.loading = false;
          });
      }
    },
    selectChange(e) {
      this.select["value"] = e;
    },
    selectOrderChange(e) {
      this.order = e;
    },
    // 选择框返回的值
    onBackData(val, dataI) {
      this[dataI] = val;
    },
    // 滚动到顶部
    scrollTop() {
      let contentRef = this.$refs.contentRef;
      if (contentRef) {
        contentRef.scrollTop = {
          top: 0,
          behavior: "smooth",
        };
      }
    },
  },
  computed: {
    isAllOpen() {
      let obj = this.activeObj;
      let arr = Object.keys(obj);
      let lArr = this.tempList;
      arr = arr.filter((val) => this.tempList.map((vals) => vals.id).includes(val));
      let filterArr = lArr.filter((val) => obj[val.id].length > 0);
      return arr.length == filterArr.length;
    },
    tempDescription() {
      let str;
      if (typeof this.sponsoredUnit != "number" && this.date) {
        str = "暂无数据";
      } else if (typeof this.sponsoredUnit == "number") {
        str = "请选择公司";
      } else if (this.date == "") {
        str = "请选择日期";
      } else if (this.list.length > 0 && this.tempList.length == 0) {
        str = "暂无符合条件数据";
      }
      return str;
    },
    tempList() {
      let res = [];
      res = this.list.filter((val) => {
        if (this.keyWord == "" || val.name.includes(this.keyWord)) {
          return val;
        } else {
          return false;
        }
      });
      return res;
    },
  },
  mounted() {
    this.date = dayjs().format("YYYY-MM");
    this.geteData();
  },
  watch: {
    sponsoredUnit: {
      handler(nVal, oVal) {
        this.geteData({ sponsoredUnit: nVal });
      },
      deep: true,
    },
    date: {
      handler(nVal, oVal) {
        this.geteData({ date: nVal });
      },
      deep: true,
    },
    order: {
      handler(nVal, oVal) {
        this.geteData({ order: nVal });
      },
      deep: true,
    },
  },
};
</script>
<style lang="less" scoped>
.wrap {
  width: 100%;
  height: 100%;

  .header {
    height: 40px;
    display: flex;
    align-content: center;
    padding: 0px 12px;
    justify-content: space-between;
    // border-bottom: 1px solid #cdcdcd;
  }

  .content {
    height: calc(100vh - 40px - 62px - 20px);
    // background-color: pink;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px;

    ::v-deep {
      .ant-spin-container {
        height: 100%;
      }

      .ant-collapse-extra {
        position: absolute;
        bottom: 0px;
        right: 8px;
        height: 100%;
        display: flex;
      }
    }

    .extraSlot {
      display: flex;
      flex-shrink: 0;
      justify-content: center;
      align-items: center;
    }

    .chartShow {
      height: 200px;
    }

    .empty {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    ::v-deep {
      .ant-collapse-header {
        font-weight: 600;
      }
    }
  }
}
</style>
